<template>
  <div class="ResultMainData">
    <div
      class="ResultMainData-content"
      v-for="item in integrationData"
      :key="item.type"
    >
      <div class="sub-title">{{ item.typeName }}</div>
      <div
        class="sub-title-main"
        v-for="(innerItem, index) in item.list"
        :key="index"
      >
        <div class="sub-title-main-container">
          <SvgIcon class="svg-icon" :icon="innerItem.icon" />
          <div class="text">{{ innerItem.name }}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, defineProps } from "vue";
const props = defineProps({
  integrationData: {
    type: Object,
    required: true,
  },
  title: {
    type: String,
    required: true,
  },
});
const typeColor = (type) => {
  if (type === 1) {
    return "农";
  } else if (type === 2) {
    return "商";
  } else if (type === 3) {
    return "替";
  }
};
</script>

<style lang="scss" scoped>
.ResultMainData {
  color: white;
  display: flex;
  margin-top: 20px;
  width: 80%;
  border: 1px dashed white;
  padding: 20px;
  overflow-y: auto;
  overflow-x: hidden;
  .ResultMainData-content {
    width: 24%;
    border: 1px dashed white;
    padding: 2px 6px;
    .sub-title {
      text-align: right;
      font-size: 26px;
    }
    .sub-title-main {
      text-align: center;
      .sub-title-main-container {
        position: relative;
        .type1 {
          background: red;
        }
        .type2 {
          background: hotpink;
        }
        .type3 {
          background: green;
        }
        span {
          position: absolute;
          right: 32%;
          bottom: 32%;
          width: 20px;
          height: 20px;
          border-radius: 20px;
          line-height: 20px;
        }
      }
      .svg-icon {
        font-size: 80px;
        margin: 20px 0 10px 0;
      }
      .text {
        font-size: 20px;
      }
    }
  }
}
</style>
